<?php
    $masterView = MasterView::getInstance();
    $topSocialPlatformsData = $masterView->metricsView->topSocialPlatformsData;
?>
<div class="header" id="header" streamid="<?php echo $this->streamView->model->streamId; ?>" messageid="">
    <div class="top-banner">
        <p>
            <span class="menu" id="menu-button">
                <i class="fa fa-bars fa-2x"></i>
            </span>
            <span class="title"><?php echo $this->streamView->model->name; ?></span>
            <span class="detail" id="filter-button"><i class="fa fa-bookmark fa-2x"></i></span>
        </p>
    </div>
    <div class="option option-engagement" id="option">
        <div class="filter">
            <a href="/#stream/"><i class="ub ub-mention ub-2x"></i></a>
                ENGAGEMENT
            <a href="/#metrics/"><i class="ub ub-metrics ub-2x"></i></a>
        </div>
    </div>
</div>
<div class="content" id="content">
    <div class="content content-thread content-engagement">
        <?php include "TopSourceHTML.php"; ?>
        <?php include "TopAuthorHTML.php"; ?>
        <?php include "TopThreadHTML.php"; ?>
    </div>
</div>
<script>
    loadEngagement();

    function loadEngagement() {
        loadTopSources();
        loadTopAuthors();
        loadTopThreads();
    }

    function loadTopSources() {
        if (window.location.href.split('#')[1].split('/')[0].toLowerCase() !== 'engagement')
            return;
        if(document.getElementById('datefrom-filter') !== null && document.getElementById('datefrom-filter') !== undefined){
            dateFrom = document.getElementById('datefrom-filter').attributes['value'].value;
            dateTo = document.getElementById('dateto-filter').attributes['value'].value;
        }
        var data = JSON.stringify({'dateFrom': dateFrom, 'dateTo': dateTo, 'language': language, 'type': type});
        sendRequest("ws/topsources/" + streamId + "/" + data, function(data) {
            addClass(document.getElementsByClassName('topSources-loading loading-small')[0], 'hide');
            removeClass(document.getElementById('tableTopSources_length'), 'hide');
            removeClass(document.getElementById('tableTopSources_filter'), 'hide');
            removeClass(document.getElementById('tableTopSources_info'), 'hide');
            removeClass(document.getElementById('tableTopSources_paginate'), 'hide');
            $('#top-source-inner').html(data);
            $('#tableTopSources').dataTable({
                "sPaginationType": "full_numbers"
            });
            if($('#top-source-inner').text().indexOf('Error') !== -1){
                $('#top-source-inner').attr('style', 'margin-top: 12%;');
            }
            $('#tableTopSources_first').html('<i class="fa fa-fast-backward"></i>');
            $('#tableTopSources_previous').html('<i class="fa fa-backward"></i>');
            $('#tableTopSources_next').html('<i class="fa fa-forward"></i>');
            $('#tableTopSources_last').html('<i class="fa fa-fast-forward"></i>');
        }, process);
    }

    function loadTopAuthors() {
        if (window.location.href.split('#')[1].split('/')[0].toLowerCase() !== 'engagement')
            return;
        if(document.getElementById('datefrom-filter') !== null && document.getElementById('datefrom-filter') !== undefined){
            dateFrom = document.getElementById('datefrom-filter').attributes['value'].value;
            dateTo = document.getElementById('dateto-filter').attributes['value'].value;
        }
        var data = JSON.stringify({'dateFrom': dateFrom, 'dateTo': dateTo, 'language': language, 'type': type});
        sendRequest("ws/topauthors/" + streamId + "/" + data, function(data) {
            addClass(document.getElementsByClassName('topAuthors-loading loading-small')[0], 'hide');
            removeClass(document.getElementById('tableTopAuthors_length'), 'hide');
            removeClass(document.getElementById('tableTopAuthors_filter'), 'hide');
            removeClass(document.getElementById('tableTopAuthors_info'), 'hide');
            removeClass(document.getElementById('tableTopAuthors_paginate'), 'hide');
            $('#top-author-inner').html(data);
            $('#tableTopAuthors').dataTable({
                "sPaginationType": "full_numbers"
            });
            if($('#top-author-inner').text().indexOf('Error') !== -1){
                $('#top-author-inner').attr('style', 'margin-top: 12%;');
            }
            $('#tableTopAuthors_first').html('<i class="fa fa-fast-backward"></i>');
            $('#tableTopAuthors_previous').html('<i class="fa fa-backward"></i>');
            $('#tableTopAuthors_next').html('<i class="fa fa-forward"></i>');
            $('#tableTopAuthors_last').html('<i class="fa fa-fast-forward"></i>');
        }, process);
    }

    function loadTopThreads() {
        if (window.location.href.split('#')[1].split('/')[0].toLowerCase() !== 'engagement')
            return;
        if(document.getElementById('datefrom-filter') !== null && document.getElementById('datefrom-filter') !== undefined){
            dateFrom = document.getElementById('datefrom-filter').attributes['value'].value;
            dateTo = document.getElementById('dateto-filter').attributes['value'].value;
        }
        var data = JSON.stringify({'dateFrom': dateFrom, 'dateTo': dateTo, 'language': language, 'type': type});
        $.post("ws/topthreads/" + streamId + "/" + data, function(data) {
            addClass(document.getElementsByClassName('topThreads-loading loading-small')[0], 'hide');
            removeClass(document.getElementById('tableTopThreads_length'), 'hide');
            removeClass(document.getElementById('tableTopThreads_filter'), 'hide');
            removeClass(document.getElementById('tableTopThreads_info'), 'hide');
            removeClass(document.getElementById('tableTopThreads_paginate'), 'hide');
            $('#top-thread-inner').html(data);
            $('#tableTopThreads').dataTable({
                "sPaginationType": "full_numbers"
            });
            if($('#top-thread-inner').text().indexOf('Error') !== -1){
                $('#top-thread-inner').attr('style', 'margin-top: 12%;');
            }
            $('#tableTopThreads_first').html('<i class="fa fa-fast-backward"></i>');
            $('#tableTopThreads_previous').html('<i class="fa fa-backward"></i>');
            $('#tableTopThreads_next').html('<i class="fa fa-forward"></i>');
            $('#tableTopThreads_last').html('<i class="fa fa-fast-forward"></i>');
        });
    }
</script>